<template>
  <view class="messagesComBox" @click="emit('onClick', props.index)">
    <image :src="props.icon" mode="aspectFill" />

    <view class="body">
      <!-- 用户信息 -->
      <view class="info">
        <view class="username">{{ props.title }}</view>
        <view class="time">{{ t_formats(props.time) }}</view>
      </view>

      <!-- 内容 -->
      <view class="content">{{
        props.sum > 0 ? contentHandler(props.typed) : '暂无新的消息'
      }}</view>

      <!-- 消息提示 -->
      <view class="prompt" v-show="props.sum > 0">{{
        props.sum > 99 ? 99 : props.sum
      }}</view>
    </view>
  </view>
</template>

<!-- 消息组件 -->
<script lang="ts" setup>
import {
  onLoad,
  onReady,
  onShow,
  onHide,
  onUnload,
  onPageScroll,
} from '@dcloudio/uni-app'
import { t_formats } from '@/util/t_format'
import {
  ref,
  type PropType,
  defineProps,
  defineEmits,
  onBeforeUpdate,
} from 'vue'
import type { MessagesContent } from '@/config/data/data'
//自定义事件
const emit = defineEmits(['onClick'])

//接受父组件的参数
const props = defineProps({
  title: {
    type: String, //消息描述
  },
  icon: {
    type: String, //消息图标
  },
  content: {
    type: String, //大致内容
  },
  index: {
    type: Number, //下标
  },
  typed: {
    type: String, //类型
    default:""
  },
  time: {
    type: Date, //最新时间
  },
  sum: {
    type: Number, //未读数
    default:0
  },
})

//处理内容显示
const contentHandler = (typed: string) => {
  if (typed == 'order') {
    return '您的订单有了新的进度'
  } else if (typed == 'ads') {
    return '您有新的内容，点击前往浏览'
  } else if (typed == 'goods') {
    return '您有新的消息，点击查阅'
  } else if(typed=='notice'){
    return '新的公告已发出，前往查看'
  }else if(typed=="admin"){
    return '您有新的通知，请查阅'
  }
}

// 页面周期函数--监听页面加载
onLoad(() => {
  // const res = uni.getMenuButtonBoundingClientRect()
  // console.log(res.width)
  // console.log(res.height)
  // console.log(res.top)
  // console.log(res.right)
  // console.log(res.bottom)
  // console.log(res.left)
})

// 页面周期函数--监听页面初次渲染完成
onReady(() => {})
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {})
// 页面周期函数--监听页面隐藏
onHide(() => {})
// 页面周期函数--监听页面卸载
onUnload(() => {})
</script>

<style scoped lang="scss">
.messagesComBox {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx;
  font-size: 26rpx;
  color: rgb(123, 121, 121);
  letter-spacing: 2rpx;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

  .hover {
    background-color: rgb(203, 200, 200) !important;
  }

  image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 10rpx;
    margin-right: 15rpx;
  }

  .body {
    position: relative;
    padding: 5rpx 0;
    width: calc(100% - 120rpx);

    .info {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .username {
        width: calc(100% - 120rpx);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30rpx;
        color: rgb(41, 40, 40);
      }

      .time {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 120rpx;
        font-size: 24rpx;
      }
    }

    .content {
      width: calc(100% - 60rpx);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .prompt {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      border-radius: 50%;
      font-size: 24rpx;
      padding-top: 1rpx;
      color: rgb(255, 255, 255);
      background-color: rgb(243, 72, 72);
    }
  }
}
</style>
